<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Netduino.Sensor Display</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/le-frog/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

    <style type="text/css">
      /*demo page css*/
      body{ font: 100% "Trebuchet MS", sans-serif; margin: 50px;}
      H1 { margin-top: 0em; text-align: center}
      #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
      #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
      ul#icons {margin: 0; padding: 0;}
      ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
      ul#icons span.ui-icon {float: left; margin: 0 4px;}
    </style>

    <script type="text/javascript">
      //updates the display after new data is received asynchronously
      function update_display()
      {
      //Request an update using a JSON ajax call.
      //Timeout is quite low, since we do not want to receive old
      //values as an update.  Rather we should try to get a new update
      $.ajax({
      url: "data.json",
      dataType: "json",
      type: "GET",
      cache: false,
      jsonp: false,
      timeout: 400,
      success: function(json) {

      //set the sliders
      $.each(json, function(i) {
      var sample = json[i];
      $( "#slider" + i ).slider( "option", "value", sample.sample.value );
      });      

      $("#sensorvalue").empty();
      $.each(json, function(i) {
      var sample = json[i];
      $("#sensorvalue").append(sample.sample.value + ' ' + sample.sample.unitsymbol + '<br/>');
      });
      $("#errorarea").hide(); //there is no error to show when successful
      },
      error: function(jqXHR, textStatus, errorThrown) {
      $("#errordisplay").empty();
      $("#errordisplay").append('<strong>' + textStatus + ':</strong>' + errorThrown);
      $("#errorarea").show(); //there is the error to show now
      }
      });
      }


      function start_netduino_display_updates()
      {
      $.ajaxSetup({ cache: false }); //to allow repeated calls to the same url actually hit the wire
      window.setInterval("update_display()", 1000);
      update_display(); //update immediately for the first time
      }

    </script>

    <style type="text/css">
      #slider { margin: 10px; }
    </style>
    <script>
      $(document).ready(function() {
      $("#slider0").slider();
      $( "#slider0" ).slider( "option", "max", 1024 );
      $("#slider1").slider();
      $( "#slider1" ).slider( "option", "max", 1024 );
      $("#slider2").slider();
      $( "#slider2" ).slider( "option", "max", 1024 );
      });
    </script>
  </head>
  <body onload="start_netduino_display_updates();">
    <h1>Netduino.Sensor Display</h1>
    <!-- slider -->
    <div id="slider1" class="slider"></div>
    <div id="slider2" class="slider"></div>
    <div id="slider3" class="slider"></div>
    <!-- value display -->
    <div style ="margin-bottom: 0.3em" class="ui-widget ui-widget-content ui-corner-all">
      <div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
        <div id ="sensorvalue" style="font-size: 4em; line-height: 1.0; text-align:right; margin: 1em 0; width: 80%;">
          00000 . 000000 . 00000000 .
        </div>
      </div>
    </div>
    <!--Error notification-->
    <div class="ui-widget" id="errorarea" style="margin:0em;">
      <div class="ui-state-error ui-corner-all" style="padding:0.3em">
        <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
        <div id="errordisplay">
          <strong>Alert:</strong> Please enable JavaScript for the live display.
        </div>
      </div>
    </div>
  </body>
</html>